<template>
    <div>
        <el-form :inline="true">
            <el-form-item label="退货单编号">
                <el-input v-model=" strippingNo" placeholder="请输入退货单编号"></el-input>
            </el-form-item>
            
            <el-form-item label="销售订单编号">
                <el-input v-model=" productionOrderNo" placeholder=" 请输入销售订单编号"></el-input>
            </el-form-item>


            <el-form-item label="客户名称">
                <el-input v-model=" customerName" placeholder="请输入客户名称"></el-input>
            </el-form-item>
            
            
         
            
            <el-form-item label="仓库名称">
                <el-input v-model=" strippingName" placeholder=" 请输入仓库名称"></el-input>
            </el-form-item>
            
            <el-form-item label="单据状态">
                <el-select v-model="status" placeholder="请选择">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="已出库" value="已出库"></el-option>
                    <el-option label="部分出库" value="部分出库"></el-option>
                    <el-option label="未出库" value="未出库"></el-option>
                </el-select>
            </el-form-item>
            
            <el-button type="primary" @click="search" style="margin-bottom: 20px;">
                <el-icon style="margin-right: 10px;"><Search /></el-icon>搜索
            </el-button>
        </el-form>
        
        <el-button type="primary" v-perm:management:salesorder:insert="insert">添加</el-button>
        <el-button type="primary" v-perm:management:salesorder:update="update">修改</el-button>
        <el-button type="primary" v-perm:management:salesorder:remove="remove">删除</el-button>
        <el-button type="primary" @click="bulkDelete" :disabled="selectedRows.length === 0">批量删除</el-button>

        <el-table :data="salesorder" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50"></el-table-column>
         
            <el-table-column prop="strippingNo" label="退货单编号" width="150"></el-table-column>
            
            <el-table-column prop="strippingName" label="退货单名称" width="150"></el-table-column>

            <el-table-column prop="productionOrderNo" label="销售订单编号" width="150"></el-table-column>
           
            <el-table-column prop="customerName" label="客户名称" width="150"></el-table-column>
           
            <el-table-column prop="warehouseName" label="仓库名称" width="150"></el-table-column>
        
            <el-table-column prop="storageAreaName" label="库区名称" width="150"></el-table-column> <el-table-column prop="strippingDate" label="出库日期" width="150"></el-table-column>
           
            
            <el-table-column prop="storageLocationName" label="库位名称" width="150"></el-table-column>
            
            <el-table-column prop="returnDate" label="退货日期" width="150"></el-table-column>
            <el-table-column prop="status" label="状态" width="150"></el-table-column>
            <el-table-column label="操作" width="200px">
                <template #default="scope">
                    <el-button :row="scope.row" type="primary" v-perm:management:salesorder:update="update">修改</el-button>
                    <el-button type="danger" size="mini" :row="scope.row" v-perm:management:salesorder:remove="remove" @click="deleteSingle(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <el-dialog :destroy-on-close="true" :title="title" v-model="visible" style="width: 1250px;">
            <router-view :data="data" @close="close"></router-view>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import router from '@/router'

let data = ref({})
let visible = ref(false)
let title = ref('')

const insert = (p) => {
    visible.value = true
    title.value = p.cname
    router.push(p.path)
}

const update = (p) => {
    visible.value = true
    title.value = p.cname
    router.push(p.path)
}

// 初始化状态（设置默认值）
const strippingNo= ref('')
const productionOrderNo= ref('')
const customerName= ref('')
const strippingName= ref('')
const status= ref('')
// 示例订单数据
let salesorder = ref([
    {
        strippingNo: 'SO20211101001',
        strippingName: '出库单名称1',
        productionOrderNo: 'SO20211101001',
        customerCode: 'C001',
        customerName: '客户名称1',
        warehouseName: '仓库名称1',
        storageAreaName: '库区名称1',
        storageLocationName: '库位名称1',
        returnDate: '2021-11-01',
        status: '已出库'
    },
    {
        strippingNo: 'SO20211101002',
        strippingName: '出库单名称2',
        productionOrderNo: 'SO20211101002',
        customerCode: 'C002',
        customerName: '客户名称2',
        warehouseName: '仓库名称2',
        storageAreaName: '库区名称2',
        storageLocationName: '库位名称2',
        returnDate: '2021-11-02',
        status: '部分出库'
    },
    {
        strippingNo: 'SO20211101003',
        strippingName: '出库单名称3',
        productionOrderNo: 'SO20211101003',
        customerCode: 'C003',
        customerName: '客户名称3',
        warehouseName: '仓库名称3',
        storageAreaName: '库区名称3',
        storageLocationName: '库位名称3',
        returnDate: '2021-11-03',
        status: '未出库'
    }
    

]);

let selectedRows = ref([]);

const handleSelectionChange = (val) => {
    selectedRows.value = val;
};

const bulkDelete = () => {
    if (confirm("确定要删除选中的订单吗？")) {
        salesorder.value = salesorder.value.filter(order => !selectedRows.value.includes(order));
        selectedRows.value = []; // 清空选中项
    }
};

// 单行删除方法
const deleteSingle = (row) => {
    if (confirm("确定要删除该订单吗？")) {
        salesorder.value = salesorder.value.filter(order => order.orderNo !== row.orderNo);
    }
};
</script>

<style  scoped>
.el-select {
    width: 150px;
}
</style>
